<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org"
      xmlns:sec="http://www.thymeleaf.org/thymeleaf-extras-springsecurity4">
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <link rel="icon" href="/img/favicon.ico">
    <style>
        .get {
            background: #EEE685;
            color: #fff;
            text-align: center;
            padding: 100px 0;
        }

        .get-title {
            font-size: 200%;
            border: 2px solid #fff;
            padding: 20px;
            display: inline-block;
        }

        .get-btn {
            background: #fff;
        }

        .detail {
            background: #fff;
        }

        .detail-h2 {
            text-align: center;
            font-size: 150%;
            margin: 40px 0;
        }

        .detail-h3 {
            color: #1f8dd6;
        }

        .detail-p {
            color: #7f8c8d;
        }

        .detail-mb {
            margin-bottom: 30px;
        }

        .hope {
            background: #0bb59b;
            padding: 50px 0;
        }

        .hope-img {
            text-align: center;
        }

        .hope-hr {
            border-color: #149C88;
        }

        .hope-title {
            font-size: 140%;
        }

        .about {
            background: #fff;
            padding: 40px 0;
            color: #7f8c8d;
        }

        .about-color {
            color: #34495e;
        }

        .about-title {
            font-size: 180%;
            padding: 30px 0 50px 0;
            text-align: center;
        }

        .p {
            color: #7f8c8d;
            margin: 0;
            padding: 15px 0;
            text-align: center;
            background: #2d3e50;
        }
    </style>
</head>
<body>
<div th:include="header.html"></div>

    <div class="get">
        <div class="am-g">
            <div class="am-u-lg-12">
                <h1 class="get-title" th:text="${blogSlogen}"></h1>

                <p th:text="${blogMinorSlogen}"></p>
            </div>
        </div>
    </div>

    <div class="detail">
        <div class="am-g">
            <div class="am-u-lg-10 am-u-lg-offset-1">
                <hr>
                <h4>最新文章</h4>
                <hr>
                <div data-am-widget="list_news" class="am-list-news am-list-news-default">
                    <div class="am-list-news-bd">
                        <ul th:each="article : ${articles}" class="am-list">
                            <li class="am-g am-list-item-desced">
                                <a th:href="@{'/article?articleId='+${article.getId()}}" th:text="${article.getTitle()}"
                                   class="am-list-item-hd"></a>
                                <div th:text="'作者：' + ${article.getAuthorUsername()}  + '， 摘要：' + ${article.getArticleAbstract()} + '， 最后修改时间：' + ${article.getLastModified()} + ', 分类：' + ${article.getCatalogName()}"
                                     class="am-list-item-text am-text-primary"></div>
                            </li>

                        </ul>
                    </div>
                </div>
            </div>
        </div>
    </div>

<div th:include="footer.html"></div>



    <script src="/js/jquery.min.js"></script>
<link rel="stylesheet" href="/css/amazeui.min.css"/>
<script src="/js/handlebars.min.js" type="text/javascript"></script>
<script src="/js/amazeui.min.js"></script>
</body>
</html>